<script lang="ts" setup>
import { ref } from 'vue';
// 图片选择
const imageSrc = ref('')
const chooseImage = () => {
  uni.chooseImage({
    count: 1,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success: (res: UniApp.ChooseImageSuccessCallbackResult) => {
      // 确定 res.tempFilePaths 是字符串数组类型
      const tempFilePaths = res.tempFilePaths as string[]
      imageSrc.value = tempFilePaths[0]
    }
  })
}
</script>
<template>
  <view class="header">
    <view class="top">
      <!-- <view class="personal">个人主页</view> -->
    </view>
    <view class="user-box">
      <view class="user-info">
        <view class="user-img" @click="chooseImage">
          <image v-if="!imageSrc" src="/static/images/icon_image_large.png" mode="scaleToFill" class="imgs" />
          <image v-else :src="imageSrc" mode="scaleToFill" class="imgss" />
        </view>
        <view class="user-text">
          <view class="user-nickname">用户昵称</view>
          <view class="user-state">男 · 30岁 · IP湖北</view>
        </view>
      </view>
      <view class="user-num">
        <span class="num">10</span>关注 | <span class="num">100</span>粉丝 |
        <span class="num">10000</span>获赞与收藏
      </view>
    </view>
  </view>
  <view class="mid">
    <view class="order-box">
      <view class="title">我的订单</view>
      <view class="order-feature">
        <view class="feature-box">
          <img src="@/static/images/待付款.png" alt="" class="feature-img">
          <view class="text">待付款</view>
        </view>
        <view class="feature-box">
          <img src="@/static/images/待收货.png" class="feature-img">
          <view class="text">待服务</view>
        </view>
        <view class="feature-box">
          <img src="@/static/images/评论.png" alt="" class="feature-img">
          <view class="text">待评价</view>
        </view>
        <view class="feature-box">
          <img src="@/static/images/退货.png" alt="" class="feature-img">
          <view class="text">待售后</view>
        </view>
      </view>
    </view>
  </view>
  <view class="bottom">
    <view class="list-box">
      <img src="@/static/images/icon_shoucang@2x.png" alt="" class="list-img">
      <view class="list-text">我的收藏</view>
    </view>
    <view class="list-box">
      <img src="@/static/images/icon_fatie@2x.png" alt="" class="list-img">
      <view class="list-text">我的发帖</view>
    </view>
    <view class="list-box">
      <img src="@/static/images/icon_xiaoxi@2x.png" alt="" class="list-img">
      <view class="list-text">我的消息</view>
    </view>
    <view class="list-box">
      <img src="@/static/images/icon_zhanghu@2x.png" alt="" class="list-img">
      <view class="list-text">我的账户</view>
    </view>
    <view class="list-box">
      <img src="@/static/images/icon_help-circle@2x.png" alt="" class="list-img">
      <view class="list-text">帮助中心</view>
    </view>
    <view class="list-box">
      <img src="@/static/images/icon_settings@2x.png" alt="" class="list-img">
      <view class="list-text">个人设置</view>
    </view>
  </view>
</template>
<style lang="scss">
.header {
  height: 400rpx;
  padding: 0 64rpx;
  background-color: #F2BB16;

  .top {
    height: 76rpx;
    display: flex;
    /* #ifdef H5 */
    justify-content: flex-end;
    /* #endif */
    /* #ifdef MP-WEIXIN */
    justify-content: flex-start;
    /* #endif */
    align-items: center;

    .personal {
      width: 164rpx;
      height: 48rpx;
      line-height: 48rpx;
      text-align: center;
      font-size: 30rpx;
      font-weight: 700;
      color: #fff;
      background: #949090;
      border-radius: 20px;
    }
  }

  .user-box {
    .user-info {
      display: flex;
      align-items: center;

      .user-img {
        background: #949090;
        height: 134rpx;
        width: 134rpx;
        border-radius: 50%;
        overflow: hidden;
        background-position: center;
        background-size: cover;

        .imgs {
          height: 134rpx;
          width: 134rpx;
        }

        .imgss {
          height: 134rpx;
          width: 134rpx;
        }

      }

      .user-text {
        margin-left: 32rpx;

        .user-nickname {
          height: 52rpx;
          font-size: 32rpx;
          font-weight: 500;
          color: #000000;
          line-height: 52rpx;
        }

        .user-state {
          height: 52rpx;
          font-size: 28rpx;
          font-weight: 500;
          color: #ffffff;
          line-height: 52rpx;
        }
      }
    }

    .user-num {
      display: flex;
      align-items: flex-end;
      height: 52rpx;
      margin-top: 34rpx;
      font-size: 28rpx;
      font-weight: 500;
      color: #ffffff;
      line-height: 62rpx;

      .num {
        margin: 0 5px;
        font-size: 40rpx;
        font-weight: 600;
        color: #000000;
        background-color: #F2BB16;
      }
    }
  }
}

.mid {
  position: relative;
  height: 200rpx;

  .order-box {
    position: absolute;
    height: 152rpx;
    width: 578rpx;
    margin-left: 60rpx;
    padding: 24rpx;
    border-radius: 10px;
    background-color: #fff;
    overflow: hidden;
    transform: translateY(-46rpx);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);

    .title {
      color: #949090;
      font-size: 30rpx;
      font-weight: 600;
    }

    .order-feature {
      display: flex;
      height: 100%;
      margin: auto 35rpx;
      justify-content: space-between;

      .feature-box {
        margin-top: 15rpx;

        .feature-img {
          display: block;
          margin: 0 auto;
          height: 60rpx;
          width: 60rpx;
        }

        .text {
          height: 33rpx;
          margin-top: 3rpx;
          line-height: 33rpx;
          color: #000000;
          font-size: 26rpx;
          font-weight: 400;
        }
      }
    }
  }
}

.bottom {
  margin: 0 64rpx;

  .list-box {
    display: flex;
    align-items: center;
    margin-bottom: 40rpx;

    .list-img {
      height: 48rpx;
      width: 48rpx;
    }

    .list-text {
      margin-left: 10rpx;
    }
  }
}
</style>